---
title: Introduction
---

import { Card, Tabs, TabItem, CardGrid, Icon } from '@astrojs/starlight/components'
import Seo from '../../../components/Seo.astro'
import Logo from '../../../assets/logo.svg'

<Seo
    seo={{
        title: 'Introduction',
        description: 'What is Unistyles?'
    }}
>

<div style="display:flex;justify-content:center;flex-direction:column;align-items:center;">
    <img
        src={Logo.src}
        style="height: 240px;width:240px;margin-bottom:20px;"
    />
</div>

:::tip
- If you find any bug, please create an issue [here](https://github.com/jpudysz/react-native-unistyles/issues).
- Do you have a feature request? Create a new [discussion](https://github.com/jpudysz/react-native-unistyles/discussions).
- Are you looking for real-time chat? Join our [discord](https://discord.gg/akGHf27P4C).
:::

  
Unistyles is a cross-platform library that enables you to share up to 100% of your styles across all platforms.
It combines the simplicity of `StyleSheet` with the performance of `C++`. 

**`Unistyles` is a superset of `StyleSheet`** similar to how `TypeScript` is a superset of `JavaScript`. 
If you're familiar with styling in React Native, then you already know how to use `Unistyles`.

### Quick demo

```tsx title="Demo.tsx"  /import.*unistyles'/ /const { styles }.*/ /const stylesheet.*/
import React from 'react'
import { View } from 'react-native'
import { createStyleSheet, useStyles } from 'react-native-unistyles'

export const Demo: React.FunctionComponent = () => {
    const { styles } = useStyles(stylesheet)

    return (
        <View style={styles.container}>
            <View style={styles.box} />
            <View style={styles.rectangle} />
        </View>
    )
}

const stylesheet = createStyleSheet(theme => ({
    // regular RN styles
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    // or with some superpowers 🦄
    // ◦ with theme
    box: {
        width: 100,
        height: 100,
        backgroundColor: theme.colors.primary
    },
    // ◦ with breakpoints
    rectangle: {
        width: {
            xs: 100,
            md: 200,
            xl: 400
        },
        height: {
            xs: 50,
            md: 100,
            xl: 200
        },
        backgroundColor: theme.colors.secondary
    },
    // ◦ and much much more!
    // dynamic functions, media queries, variants, runtime values
}))
```

The library offers first-class support for `TypeScript`, providing guidance with Intellisense as you create your extended StyleSheets.

Are you ready to give it a try?

</Seo>
